<template>
	<div class="tab-control">
		<div class="tab-control-item" v-for="(item,index) in list"
		     :key="index" @click="itemClick(index)"
		     :class="{active:currentIndex === index}">
			<span>{{item}}</span>
		</div>
		
	</div>
</template>

<script>
import {ref} from "vue";

export default {
	name: "TabControl",
	props:{
		list:{
			type:Array,
			default(){
				return []
			}
		},
		
		
	},
	setup(props,context){
		let currentIndex = ref(0) // 当前索引
		const itemClick = (index)=>{
		currentIndex.value = index
			// 发送点击事件
			context.emit('tabClick',index)
		}
		
		return {
			itemClick,
			currentIndex,
		
		}
	}
}
</script>

<style scoped>
.tab-control {
	background-color: yellow;
	line-height: 40px;
	height: 40px;
	display: flex;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;

}

.tab-control-item {
	flex: auto;
	padding: 3px;
	
}

.active span {
	color: #42b983;
	/*border-bottom: 3px solid #42b983;*/
}
</style>